<template>
  <div id="cart">
    <van-nav-bar title="购物车" left-text right-text left-arrow @click-left="onClickLeft">
      <!-- <template v-slot:right>
             <span style="color: red">菜单</span>
      </template>-->
      <!-- <span style="color:blue" slot="right">菜单</span> -->
    </van-nav-bar>

    <cartLogin  v-if='!$store.state.loginFig'></cartLogin>
    <emptyCart v-if="list.length==0"></emptyCart>
    <!-- {{result}} -->
    <div class="product-cart">
      <van-checkbox-group v-model="result">
        
        <van-checkbox
          checked-color="#E93B3D"
          v-model="goods.checked"
          :name="goods.id"
          v-for="(goods,index) in list"
          :key="index"
        >
          <van-card
            class="goods-item"
            :num="goods.count"
            :price="goods.price"
            :title="goods.title"
            :thumb="goods.image"
          >
            <div slot="num" @click.stop>
              <van-stepper v-model="goods.count" />
            </div>
          </van-card>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <div style="height: 52px"></div>
    <van-submit-bar :price="totalPrice" label="总计：" :button-text="total">
      <van-checkbox checked-color="#E93B3D" v-model="all">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import cartLogin from "@/components/cartLogin";
import emptyCart from "@/components/emptyCart";

export default {
  data() {
    return {
      all: false,
      result: [],
      list: [
        {
          id: 1,
          image: require("@/assets/images/product_1.jpg"),
          title: "桌子",
          price: "29.00",
          count: 1,
            checked: false
        },
        {
          id: 2,
          image: require("@/assets/images/product_2.jpg"),
          title: "商品2",
          price: "142.00",
          count: 1,
            checked: false
        },
        {
          id: 3,
          image: require("@/assets/images/product_3.jpg"),
          title: "商品3",
          price: "9.00",
          count: 1,
            checked: false
        },
        {
          id: 4,
          image: require("@/assets/images/product_4.jpg"),
          title: "商品4",
          price: "42.00",
          count: 1,
            checked: false
        },
        {
          id: 5,
          image: require("@/assets/images/product_5.jpg"),
          title: "商品5",
          price: "111.00",
          count: 1,
            checked: false
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  components: {
    cartLogin,
    emptyCart
  },
  // 侦听器
  watch: {
    result(newVal) {
      if (newVal.length == this.list.length) {
        this.all = true;
      } else {
        this.all = false;
      }
    },
    all(newVal) {
      if (newVal) {
        this.result = [];
        this.list.forEach((item, index) => {
          this.result.push(item.id);
        });
      } else if (this.result.length == this.list.length) {
        //必须是我们点击的取消全选才能触发。把所有的勾去掉。
        //通过全选中的result的长度和总商品的长度一致的情况下。才能认为你是点的取消全选
        this.result = [];
      }
    }
  },
  //   计算属性
  computed: {
    //   计算我们所有商品的总价
    totalPrice() {
      //   通过循环。找到每个商品的价格和数量。。。在将其累加
        //   itme.id 是遍历所有商品的每个自己的id
        //  通过数组的 indexOf 里面的id  匹配在result里面是否包含该商品id
        // 如果有的话说明该件商品现在是被选中的
        //   console.log(this.result.indexOf(item.id))
        //   if (this.result.indexOf(item.id) > -1) {
        //     num += item.count * item.price * 100;
        //   }
      let sum = 0;
      this.list.forEach((item, index) => {
        if (this.result.indexOf(item.id) > -1) {
          sum += item.count * item.price * 100;
        }
      });
      return sum;
    },
    //   计算我们所有商品的总数
    total() {
      var num = 0;
      this.list.forEach((item, index) => {
          if (this.result.indexOf(item.id) > -1) {
            num += item.count;
          }
      });
      return "去结算(" + num + ")件";
    }
  }
};
</script>

<style lang="less">
#cart {
  height: 100%;
  background: #f7f7f7;

  .product-cart {
    margin-top: 5px;
    background: white;

    // 整个商品卡片的背景
    .van-card {
      background: white;
    }
    // checkbox的前面缩进
    .van-checkbox__icon {
      padding-left: 10px;
    }
    // 整个商品卡片的宽度
    .van-checkbox__label {
      width: 100%;
    }
  }
}
</style>